import React from 'react'
import { NavBar, SwipeCell, Flex, Button, Image, Typography } from 'react-vant';
import './follow.css'
import { useNavigate } from 'react-router-dom'

const src = 'https://ts1.cn.mm.bing.net/th?id=OIP-C.ews8u0RDDBwXo-3S57pZGgHaJn&w=219&h=284&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2'

export default function Follow() {
  const navigate = useNavigate()
  return (
    <div className='follow'>
      {/* nav */}
      <NavBar
        title="我的关注"
        onClickLeft={() => navigate('/my')}
      />
      {/* list */}
      <SwipeCell
        rightAction={
          <Button style={{ height: '100%' }} square type="danger">
            删除
          </Button>
        }
      >
        <Flex className="demo-product-card" align="stretch">
          <Image src="https://img.yzcdn.cn/vant/ipad.jpeg" className="demo-product-card__img" />
          <Flex direction="column" justify="between" className="demo-product-card__content">
            <div>
              <Typography.Title level={5}>商品标题</Typography.Title>
              <Typography.Text type="secondary">这里是商品描述</Typography.Text>
            </div>
            <Flex justify="between" align="center">
              <Typography.Text strong size="lg">
                ¥2.00
              </Typography.Text>
              <Typography.Text size="sm" type="secondary">
                x2
              </Typography.Text>
            </Flex>
          </Flex>
        </Flex>
      </SwipeCell>
    </div>
  )
}
